<template>
	<div>
		<div class="pl-6 pr-6 pt-6">
			<el-card class="!border-none pt-4" shadow="never">
				<el-form class="ls-form el-set-form" :model="formData" inline>
					<el-form-item label="图号">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.Number" clearable/>
					</el-form-item>
					<el-form-item label="机型">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.type" clearable />
					</el-form-item>
					<el-form-item label="提交人">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.type" clearable />
					</el-form-item>
					<el-form-item>
						<el-button class="main-color1 w-[76px]" >重置</el-button>
						<el-button class="w-[76px]" type="primary" color="#0054A6">查询</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
				<div class="text-right">
					<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">
						<router-link :to="{
						        path: getRoutePath('permission.permission/DrawingAdd'),
						        query: {
						            id: '1'
						        }
						    }">
							<span>添加</span>
						</router-link>
					</el-button>
				</div>
				<el-table class="mt-[20px]" size="large" :data="lists"
					:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
					:cell-style="{'color':'#0054A6','padding':'20px 0'}">
					<el-table-column label="询价编号" prop="scene_name" align="center" width="100px">
						<template #default="{ row }">
							<span class="main-color">22222</span>
						</template>
					</el-table-column>
					<el-table-column label="类型" prop="询价单" align="center"  width="100px" />
					<el-table-column label="客户公司名称" prop="上海AAAA有限公司" align="center" width="130px"/>
					<el-table-column label="所属销售" prop="王小明" align="center" width="120px"/>
					<el-table-column label="状态" prop="待报价" align="center" width="100px"/>
					<el-table-column label="修改描述" prop="这里是描述内容" align="center" width="150px"/>
					<el-table-column label="原因" prop="这里是具体原因" align="center" width="150px"/>
					<el-table-column label="操作" fixed="right" align="center">
						<template #default="{ row }">
							<el-button type="primary" link >
								<router-link :to="{
								        path: getRoutePath('InquiryManagement.InquiryManagement/inquiryDetails'),
								        query: {
								            id: '1'
								        }
								    }">
									<span class="main-color1">详情</span>
								</router-link>
							</el-button>
							<el-button type="primary" link >
								<router-link :to="{
								        path: getRoutePath('permission.permission/UpdateRecords'),
								        query: {
								            id: '1'
								        }
								    }">
									<span class="main-color1">创建询价单</span>
								</router-link>
							</el-button>
							<el-button type="primary" link >
								<span class="main-color1">创建采购单</span>
							</el-button>
							<el-button type="primary" link @click="freightShow=true">
								<span class="main-color1">添加运费</span>
							</el-button>
							<el-button type="primary" link @click="saleShow=true">
								<span class="main-color1">申请创建销售订单</span>
							</el-button>
							<el-button type="primary" link >
								<span class="main-color1">创建销售订单</span>
							</el-button>
							<el-button type="primary" link @click="saleProcessShow=true">
								<span class="main-color1">销售创建订单审核</span>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</div>
		<div class="p-[20px] v-flex v-row-right">
			<el-pagination color="#0054A6" background layout="prev, pager, next" :default-page-size="6" :total="1000"
				:pager-count="6" />
		</div>
		<!-- 添加运费 -->
		<el-dialog v-model="freightShow" title="添加运费" width="20%">
		   <div>
			  <div class="main-color v-flex">
			  	<span>运费金额($)：</span>
			  	<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
			  </div>
			  <div class="text-center mt-[30px] pb-[20px]">
			  	<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">确认</el-button>
			  </div>
		   </div>
		</el-dialog>
		<!-- 申请创建销售订单 -->
		<el-dialog v-model="saleShow" title="申请创建销售订单" width="20%">
		   <div>
			  <div class="main-color v-flex v-col-top">
			  	<span>描述：</span>
			  	<el-input type="textarea" :rows="3" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
			  </div>
			  <div class="text-center mt-[30px] pb-[20px]">
			  	<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">确认</el-button>
			  </div>
		   </div>
		</el-dialog>
		<!-- 申请创建销售订单 -->
		<el-dialog v-model="saleProcessShow" title="创建销售订单审核" width="20%">
		   <div>
			  <div class="main-color v-flex v-col-top v-wordBreak">
			  	<span>描述：</span>
			  	<span>这里是描述的具体内容详情</span>
			  </div>
			  <div class="main-color v-flex v-col-center mt-[20px]">
				  <span>审核：</span>
				  <el-radio-group v-model="radio" class="ml-4">
				  	<el-radio label="1" size="large">审核通过</el-radio>
				  	<el-radio label="2" size="large">审核未通过</el-radio>
				  </el-radio-group>
			  </div>
			  <div class="main-color v-flex v-col-top mt-[20px]">
			  	<span>原因：</span>
			  	<el-input type="textarea" :rows="3" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
			  </div>
			  <div class="text-center mt-[30px] pb-[20px]">
			  	<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">确认</el-button>
			  </div>
		   </div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const formData = reactive({
		Number: '',
		type: '',
	})
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
	const freightShow = ref(false)
	const saleShow = ref(false)
	const saleProcessShow = ref(false)
	const radio = ref('1')
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	

	.el-col {
		border-radius: 4px;
	}
	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
	:deep() .el-dialog__title{
		color: var(--el-text-color-main);
	}
</style>